<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${ painting.title!''}拍卖_可观艺术</title>
<meta name="Keywords" content="${ painting.title!''}拍卖,作品详情,当代画家作品鉴赏,可观艺术" />
<meta name="Description" content="${ painting.title!''}鉴赏,大图,高清图片鉴赏" />
<link href="${ctx}/style/common.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/style/painting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#content{text-align: left;width:960px;margin: 0 auto;border:1px solid #cccccc;background: #ffffff;margin-top: 5px;}
#ciyi_top{width: 670px;margin-left: 23px;}
#ciyi_center{width: 960px;}
#ciyi_bottom{height: 55px;}
#ciyi_left{float: left;padding: 0px 10px 0px 25px;}
#ciyi_middle{float: left;width: 630px;height: 630px;border: 1px solid #ccc;}
#ciyi_right{float: left;}

.preImg{position:absolute; left:0px;top:0px;z-index:101;width: 20%;height: 100%;}
.nextImg{position:absolute; right:0px; top:0px;z-index:102;width: 20%;height: 100%;}

.newItem{padding: 5px 0px 5px 25px;font-size: 14px;color: #333333;}
#relativeList_div{width:960px;margin: 0 auto;border:1px solid #cccccc;margin-top: 4px;background: #ffffff}
.ciyi_pic{position:absolute;width: 618px;height: 618px;background: center center;margin-top: 6px;margin-left: 6px;background-repeat: no-repeat;}
.title_ciyi{font-size: 12px;}

.STYLE23 {color: #666666; font-family:幼圆; font-size: 15px;font-weight: bold;margin: 20px 0px 0px 10px;}
.size_control_img_checked{cursor: pointer;border: 1px solid red;}
.size_control_img{cursor: pointer;}
.painter_outer{background-color:#cccccc;width: 76px;height: 90px;float:left;cursor: pointer;margin-left:15px;margin-top: 10px;}
.painter_outer:hover{background-color:#ff9900;}
</style>

</head>
<body>

<div id="_link_div_win" style="display:none;z-index:1001;margin:auto;position: absolute;font-size: 12px;"></div>

<#include "/commons/head.ftl"/>

	<div id="content">
		<div id="ciyi_top">
			 <#if painting.onSaleFlag == '2' && painting.store == 0 >
					<div style="float: left;padding-top: 15px;">
						<div style="text-align:center;width: 90px;height:29px;padding-top:10px;color: #ffffff;font-size: 15px;font-weight: bold;background-repeat: no-repeat;background: url('../images/ciyi/sale_bg.png');">售罄</div>
					</div>
			</#if>
			<div style="float:left;font-family: 黑体;font-size: 22px;text-align: center;width: 570px;padding: 20px 0px 20px 0px;" id="page_title">
				${painting.title }
			</div>
			<div style="clear: both;"></div>
		</div>
		<div id="ciyi_center">
			<div id="ciyi_left">
				<div class="size_control_img"><img src="${ctx}/images/ciyi/da.jpg" border="0"/></div>
				<div style="margin-top: 15px;" class="size_control_img_checked"><img src=""${ctx}/images/ciyi/zhong.jpg" border="0"/></div>
				<div style="margin-top: 15px;" class="size_control_img"><img src=""${ctx}/images/ciyi/xiao.jpg" border="0"/></div>
			</div>
			<div id="ciyi_middle">
				<div class="preImg" title="浏览该作者上一幅作品" style="cursor:url("${ctx}/images/arr_left.cur),auto; "></div>
				<div class="nextImg" title="浏览该作者下一幅作品" style="cursor:url("${ctx}/images/arr_right.cur),auto;"></div> 
				<div style="background-image: url('${painting.middleImageBpath }');" class="ciyi_pic"></div>
			</div>
			<div id="ciyi_right">
				<div id="qqxl_div" style="height: 33px;font-size: 24px;font-family: 黑体;padding-left: 22px;">
					<#if painting.qqxl?exists && (painting.qqxl > 0)>
						全球限量<span style="color: red">${painting.qqxl }</span>${painting.unit2 }
					</#if>
				</div>
				<div id="description">
					<div class="newItem">作品编号：KGCY${painting.id }</div>
					<div class="newItem">材质：${painting.caiZhi }</div>
					<div class="newItem">规格：<#if painting.width?exists>长${painting.width}cm&nbsp;</#if><#if painting.hight?exists>宽${painting.hight}cm&nbsp;</#if><#if painting.altitude?exists>高${painting.altitude}cm</#if></div>
					<#if painting.painter?exists>
						<div class="newItem">创作者：<a href="${ctx }/${painting.painter.linkUrl }" style="text-decoration: underline;">${painting.painter.name }</a>
	           				<#if painting.zhengshu?exists><a href="${painting.zhengShuImagePath }" target="_blank" style="text-decoration: underline;">查看证书</a></#if>
						</div>
					</#if>
					<div class="newItem">物流：卖方承担</div>
					<div class="newItem">提供方：${painting.provider }</div>
				</div>
					<div class="newItem">起拍价：<span style="color: red">￥${bid.beginPrice?string("#.##") }元</span></div>
					<#if bid.currentBidRecord?exists><div class="newItem">当前价：<span id="current_price" style="color: red">${bid.currentBidRecord.bidPrice?string("#.##")}</span>元</div></#if>
					<#if bid.currentBidRecord?exists><div class="newItem">受买人：<span id="current_customer">${bid.currentBidRecord.customerInfo.displayName }</span></div></#if>
					<div class="newItem">
						<div style="float: left;background-color:#fffceb">
							加价：
							<img src=""${ctx}/images/ciyi/jian.jpg"  onclick="refresh_price('down')" style="cursor:pointer;"  border="0"/>
						</div>
						<div style="float: left;background-color:#fffceb">
							<input type="text" name="new_price" 
								<#if bid.currentBidRecord?exists>value="${bid.currentBidRecord.bidPrice?string("#.##")}"<#else>value="${bid.beginPrice?string("#.##") }"</#if>
						id="new_price" style="width: 100px;border: 0px"  readonly="readonly"/>
						</div>
						<div style="float: left;background-color:#fffceb">
							<img src=""${ctx}/images/ciyi/jia.jpg"  onclick="refresh_price('up')" style="cursor:pointer;"  border="0"/>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="newItem">
							<#if bid.newFlag == '1'><img src="${ctx}/images/ciyi/pm.jpg" width="131" height="44" style="cursor:pointer;" onclick="onbid()"/>
							<#else><img src=""${ctx}/images/ciyi/pm2.jpg" width="131" height="44"/></#if>
					</div>
					<!-- 拍卖剩余时间    begin  -->
						<div class="STYLE23">
							 <div>剩余时间：<span id="left_time0">0天0小时0分0秒</span>
							 		<!-- 当前拍品状态，是否过期  -->
								 <input type="hidden" value="${bid.newFlag }" id="new_flag"/>
								 	<!-- 当前拍品ID  -->
								<input type="hidden" name="bid_id" id="bid_id" value="${bid.id }"/>
							 </div>
						</div>
					<!-- 拍卖剩余时间    end  -->
					
				<div id="other_pics" style="width: 200px;position: absolute;margin-left: 10px;">
					<#if painting.imageInfo?exists >
						<div class="painter_outer"><div style='margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url("${painting.tinyImagePath }");background-repeat:no-repeat;'><a style="display:block;width:66px;height:82px;"></a></div></div>
					</#if>
					<#if painting.imageInfo2?exists >
						<div class="painter_outer"><div style='margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url("${painting.tinyImagePath2 }");background-repeat:no-repeat;'><a style="display:block;width:66px;height:82px;"></a></div></div>
					</#if>
					<#if painting.imageInfo3?exists >
						<div class="painter_outer"><div style='margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url("${painting.tinyImagePath3 }");background-repeat:no-repeat;'><a style="display:block;width:66px;height:82px;"></a></div></div>
					</#if>
					<#if painting.imageInfo4?exists >
						<div class="painter_outer"><div style='margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url("${painting.tinyImagePath4 }");background-repeat:no-repeat;'><a style="display:block;width:66px;height:82px;"></a></div></div>
					</#if>
			   </div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div id="ciyi_bottom"></div>
	</div>
	
	<div id="relativeList_div">
		<div style="font-size: 14px;padding: 5px 0px 5px 35px;">相关作品</div>
		<#list relativeList as result >
			<#include "/commons/ciyi_fragment.ftl"/>
		</#list>
	</div>

<form id="bidForm" name="bidForm" action="${ctx}/customer/bid!bid_confirm.do" method="post">
	<input type="hidden" value="" name="bid_id_hiddden" id="bid_id_hiddden"/>
	<input type="hidden" value="" name="new_price_hiddden" id="new_price_hiddden"/>
	<input type="hidden" value="" name="page_title_hiddden" id="page_title_hiddden"/>
	<input type="hidden" value="" name="remain_time_hiddden" id="remain_time_hiddden"/>
</form>	

<#include "/commons/foot.ftl"/>

<script type="text/javascript">

var endtimes=new Array();//结束时间

var nowtimes;
var date_str = '${bid.endTime?string("MM/dd/yyyy HH:mm:ss") }';
endtimes[0] = date_str;
function givetime(){

	nowtimes=new Date();
	window.setTimeout("DownCount()",1000);
}

function DownCount(){

	nowtimes=Number(nowtimes)+1000;
	var len = endtimes.length;

	for(var i=0;i< len;i++)
	{
		var theDay = new Date(endtimes[i]);
		theDay = theDay++;
		if(theDay<=nowtimes)
		{
			document.getElementById("left_time"+i).innerHTML = "0天00小时00分00秒";
		}
		else{
			show_date_time(endtimes[i],i);
		}
	}
	window.setTimeout("DownCount()",1000);
}

function show_date_time(date_str,index){

	BirthDay=new Date(date_str);

	today=new Date();
	timeold=( BirthDay.getTime() - today.getTime());
	sectimeold=timeold/1000;
	secondsold=Math.floor(sectimeold);
	
	msPerDay=24*60*60*1000;
	e_daysold=timeold/msPerDay;
	daysold=Math.floor(e_daysold);
	
	e_hrsold=(e_daysold-daysold)*24;
	hrsold=Math.floor(e_hrsold);
	
	e_minsold=(e_hrsold-hrsold)*60;
	minsold=Math.floor((e_hrsold-hrsold)*60);
	
	seconds=Math.floor((e_minsold-minsold)*60);

	var target_obj = document.getElementById("left_time"+index);

	if(typeof target_obj != "undefined"){
		target_obj.innerHTML= daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"; 
	}
}

function onbid(){

	var bid_id = $("#bid_id").val();
	var new_price = $("#new_price").val();
	var page_title = $("#page_title").html();
	var remain_time = $("#left_time0").html();

	page_title = escape(escape(page_title));
	remain_time = escape(escape(remain_time));

	document.getElementById("bid_id_hiddden").value = bid_id ;
	document.getElementById("new_price_hiddden").value = new_price;
	document.getElementById("page_title_hiddden").value = page_title ;
	document.getElementById("remain_time_hiddden").value = remain_time;

	$.ajax( {
		type : "POST",
		url : "${ctx}/customer/order!checkL.do?time="+new Date(),
		timeout : 6000,
		async : false, 
		success : function(data, textStatus) {
			if(data  == "0000"){
				var link_url = '${ctx}/customer/bid!bid_confirm.do?bid_id='+bid_id+'&new_price='+new_price+'&page_title='+page_title+'&remain_time='+remain_time+'&time='+new Date().getTime();

				var width = 383;
				var height = 265;
				var content = '<iframe src="'+link_url+'" width="383" height="264" frameborder="0" marginheight="0" marginwidth="0">';
				createPopupDiv("_link_div_win",width,height,content);
			}
			else{
				var link_url = "${ctx}/front/bid/login_fragment.jsp";
				var width = 383;
				var height = 265;
				var content = '<iframe src="'+link_url+'" width="383" height="264" frameborder="0" marginheight="0" marginwidth="0">';
				createPopupDiv("_link_div_win",width,height,content);
			}
		}
	});
}

/**** 距滚动条顶部距离 *******/
function getScrollTop(){
	var scrollPos; 
	if (typeof window.pageYOffset != 'undefined') { 
	   scrollPos = window.pageYOffset; 
	} 
	else if (typeof document.compatMode != 'undefined' && 
	     document.compatMode != 'BackCompat') { 
	   scrollPos = document.documentElement.scrollTop; 
	} 
	else if (typeof document.body != 'undefined') { 
	   scrollPos = document.body.scrollTop; 
	}
	return  scrollPos;
}

function createPopupDiv(divId,width,height,content){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "block";
	divWindow.style.width = width +"px";
	divWindow.style.height  = height + "px" ;
	var scrollTop = getScrollTop() ;
	divWindow.style.left = (document.body.offsetWidth - width)/2 + document.body.scrollLeft + "px";
	divWindow.style.top  = (window.screen.availHeight - height) / 2 + scrollTop + "px";
	divWindow.innerHTML = content;
}

function closePopupDiv(divId){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "none";
}

var newest_price = 0.0;//当前最新价格
function live_price(){

	var bid_id = $("#bid_id").val();
	$.ajax( {
		type : "POST",
		url : "${ctx }/customer/bid!queryCurrentBid.do?bid_id="+ bid_id,
		timeout : 6000,
		async : true, //ajax同步
		success : function(data, textStatus) {
			if(data != ""){
				var response_data = eval("("+data+")");
				var price = response_data.bidPrice;
				var userName = response_data.username;
				newest_price = price;
				$("#current_price").html(price);
				$("#current_customer").html(userName);
			}else{
				newest_price = $("#new_price").val();
			}
		}
	});
}

/************ 预修改价格(本地修改,不提交服务器 )  *************/
function refresh_price(flag){
		
	if(newest_price ==  0.0){
		live_price();
	}
	
	var _price = 100;
	var old_price = $("#new_price").val();
	var new_price = Number(old_price);
	if( flag == 'down'){
		new_price = new_price - _price;
		if( new_price < newest_price ){
			new_price = newest_price;
			return;
		}
	}
	else if(flag == 'up'){
		new_price = new_price + _price;
	}else{
		new_price = 0.00;
	}
	
	new_price = Math.round(new_price * 100)/100;
	$("#new_price").val(new_price);
}

var index_images = 0;//图片序列
var imagesArray = ${imagesArray};
$(function(){
	
	$("#ciyi_left>div").live("click",function(){
		    var index_size_btn = $("#ciyi_left>div").index($(this));
	
		    if(imagesArray.length <= 0){
		    	return;
		    }
		    var imgpath = imagesArray[index_images].bigImagePath;
			if( index_size_btn == 2 ){
				imgpath = imagesArray[index_images].smallImagePath;
			}
			else if( index_size_btn == 1 ){
				imgpath = imagesArray[index_images].middleImageBpath;
			}
			else{
				imgpath = imagesArray[index_images].bigImagePath;
			}
			
			$(".size_control_img_checked").addClass("size_control_img").removeClass("size_control_img_checked");
			$(this).addClass("size_control_img_checked");
	
			$(".ciyi_pic").css("background-image","url('"+imgpath+"')");
			$(".ciyi_pic").css("background-repeat","no-repeat");
	});
	
	$(".painter_outer").live("click",function(){
	   index_images = $(".painter_outer").index($(this));
	   $("#ciyi_left>div").eq(1).trigger("click");
    });

	$(".preImg").click(function(){
		if("${preUrl}"==""){
			return ;
		}
		location.href = "${ctx}/${preUrl}";
	});
	$(".nextImg").click(function(){
		if("${nextUrl}" == ""){
			return;
		}
		location.href = "${ctx}/${nextUrl}";
	});

});

givetime();
</script>
</body>

</html>